<template>
    <div class="breadcrumb-container">
        <el-page-header @back="eventClickGoback">
            <el-breadcrumb separator-class="el-icon-arrow-right" slot="content">
                <template v-for="(item, index) in dataset">
                    <el-breadcrumb-item v-if="index == dataset.length - 1" :key="item.path">
                        <span @click="eventClickRefreshPage" class="el-pointer">{{ item.name }}</span>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item v-else :key="item.path" :to="item.path">
                        {{ item.name }}
                    </el-breadcrumb-item>
                </template>
            </el-breadcrumb>
        </el-page-header>
        <el-button @click="eventClickUserInfoShowOrHidden" type="text" class="float-tool-button">{{ $store.state.options.navigation.user ? '收起' : '展开' }}</el-button>
    </div>
</template>

<style lang="scss">
    .breadcrumb-container {
        position: relative;

        .el-page-header__content {
            display: flex;
            align-items: center;
        }

        .float-tool-button {
            position: absolute;
            top: 0.3rem;
            right: 0rem;
        }
    }
</style>

<script>
    import { PageHeader, Breadcrumb, BreadcrumbItem, Button } from 'element-ui';

    export default {
        components: {
            [PageHeader.name]: PageHeader,
            [Breadcrumb.name]: Breadcrumb, [BreadcrumbItem.name]: BreadcrumbItem,
            [Button.name]: Button
        },
        data () {
            return {
                dataset: []
            }
        },
        computed: {
        },
        mounted () {
            this.buildBreadcrumbDataset();
        },
        methods: {
            buildBreadcrumbDataset() {
                this.dataset = [
                    {
                        name: '首页', path: '/'
                    }
                ];
                var parent = this.$route.meta.menu.parent;
                if(parent && parent != this.$store.state.options.navigation.menus[0].index) {
                    for(let x of this.$store.state.options.navigation.menus) {
                        if(x.index == parent) {
                            this.dataset.push({
                                name: x.name, path: x.path
                            });
                            break;
                        }
                    }
                }

                this.dataset.push({
                    name: this.$route.meta.menu.name,
                    path: this.$route.path
                });
            },
            eventClickGoback() {
                this.$router.go(-1);
            },
            eventClickUserInfoShowOrHidden() {
                this.$store.commit('options/setElementValue', [
                    {
                        key: 'navigation.user', value: !this.$store.state.options.navigation.user
                    }
                ]);
            },
            eventClickRefreshPage() {
                window.location.reload();
            }
        },
        watch: {
            $route() {
                this.buildBreadcrumbDataset();
            }
        }
    };
</script>
